<template>
	<view class="productDetails">
		<view class="main">

			<view class="SUCCESS" v-if="data.info.refundState.value == 'SUCCESS'">
				<view class="" v-if="data.info.refundType.value == 'ALL_REFUND'">
					<!-- 退款退货 -->
					<view class="topTit">
						<view class="">
							<view class="left">
								<image src="/static/img/index/141.png" mode="widthFix"></image>
								已退款
							</view>
							￥{{data.info.refundAmount}}
						</view>
						已原路返回
					</view>
				</view>
				<view class="" v-else>
					<!-- 换货 -->
					<view class="top_1">
						<view class="">
							<image src="/static/img/index/144.png" mode="widthFix"></image>
							买家已寄回退换货物，注意物流信息
						</view>
						{{data.info.buyerSendTime}}
					</view>
					<view class="des_1" @tap="handeClick">
						退货物流
						<view class="">
							<view>
								<image src="/static/img/index/143.png" mode="widthFix"></image>
								{{data.info.buyerLogisticsInfo?data.info.buyerLogisticsInfo.expressCompanyName +' ' +data.info.buyerLogisticsInfo.number:'暂无物流信息'}}
							</view>
							{{data.info.buyerLogisticsInfo?.theLastMessage}}
						</view>
					</view>
				</view>
			</view>
			<view class="WAIT_BUYER_RECEIVE" v-if="data.info.refundState.value == 'WAIT_BUYER_RECEIVE'">
				<view class="top_1">
					<view class="">
						<image src="/static/img/index/48.png" mode="widthFix"></image>
						等待买家收货
					</view>
					{{data.info.buyerSendTime}}
				</view>
				<view class="des_1" @tap="handeClick">
					发货物流
					<view class="">
						<view>
							<image src="/static/img/index/143.png" mode="widthFix"></image>
							{{data.info.buyerLogisticsInfo?data.info.buyerLogisticsInfo.expressCompanyName +' ' +data.info.buyerLogisticsInfo.number:'暂无物流信息'}}
						</view>
						{{data.info.buyerLogisticsInfo?.theLastMessage}}
					</view>
				</view>
			</view>

			<view class="WAIT_SELLER_REPEAT_SEND" v-if="data.info.refundState.value == 'WAIT_SELLER_REPEAT_SEND'">
				<view class="top_1">
					<view class="">
						<image src="/static/img/index/48.png" mode="widthFix"></image>
						填写重发物流信息
					</view>
					{{data.info.buyerSendTime}}
				</view>
				<view class="des_2">
					填写发货物流信息
					<view class="kd">
						快递公司
						<view class="">
							请选择快递公司
							<image src="/static/img/index/25.png" mode=""></image>
						</view>
					</view>
					<view class="dh">
						快递单号
						<input v-model="data.number" type="text" placeholder="请输入快递单号" />
						<image style="display: none;" src="/static/img/index/78.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="WAIT_SELLER_RECEIVE" v-if="data.info.refundState.value == 'WAIT_SELLER_RECEIVE'">
				<view class="top_1">
					<view class="">
						<image src="/static/img/index/142.png" mode="widthFix"></image>
						买家已寄回退换货物，注意物流信息
					</view>
					{{data.info.buyerSendTime}}
				</view>
				<view class="des_1" @tap="handeClick">
					换货物流
					<view class="">
						<view>
							<image src="/static/img/index/143.png" mode="widthFix"></image>
							{{data.info.buyerLogisticsInfo?data.info.buyerLogisticsInfo.expressCompanyName +' ' +data.info.buyerLogisticsInfo.number:'暂无物流信息'}}
						</view>
						{{data.info.buyerLogisticsInfo?.theLastMessage}}
					</view>
				</view>
			</view>

			<view class="WAIT_BUYER_SEND" v-if="data.info.refundState.value == 'WAIT_BUYER_SEND'">
				<view class="top_1">
					<view class="">
						<image src="/static/img/index/48.png" mode="widthFix"></image>
						等待买家寄回货物
					</view>
					<!-- 2024-09-04  15:04:23 -->
				</view>
				<view class="des_1">
					退货物流
					<view class="">
						<view>
							<image src="/static/img/index/83.png" mode="widthFix"></image>
							暂无物流信息
						</view>
						若买家逾期未处理，系统将默认取消该次退款申请
					</view>
				</view>
			</view>

			<view class="handle"
				v-if="data.info.refundState.value == 'PENDING' || data.info.refundState.value == 'REJECT'">
				<view class="top">
					<view class="topList">
						<view :class="[index<=data.index?'active':'',index<data.index?'active1':'']" class=""
							v-for="(item,index) in 3" :key="index">
							<text></text>
							<view class="" v-if="index != 2">

							</view>
						</view>
					</view>
					<view class="topList_1">
						<text>提交申请</text>
						<text>商户处理</text>
						<text>退款成功</text>
					</view>
				</view>
				<view class="des">
					{{data.info.refundState.value == 'REJECT'?'商户审核拒绝':data.info.refundType.value == 'CHANGE_PRODUCT'?'买家已申请换货，请核查后进行处理':'买家已申请退款，请核查后进行处理'}}
					<text>商家同意或超时未处理，系统将退款给您，如果商家拒绝，买家可以修改退款申请后再次发起，商家后重新处理</text>
					<text v-if="data.info.refundState.value == 'REJECT'">请于24小时内修改申请重新提交，逾期未提交，退款申请将关闭。</text>
				</view>
			</view>
			<view class="CANCEL" v-if="data.info.refundState.value == 'CANCEL'">
				买家已撤销
			</view>
			<view class="refund">
				退款商品
				<view class="goods">
					<view class="left">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+data.info.mainPictureId"
							mode="aspectFill"></image>
					</view>
					<view class="right">
						<text class="ellipsis_2">{{data.info.spuName}}</text>
						<view>
							{{data.info.specName}}，{{data.info.specValue}}
							<text>x {{data.info.count}}</text>
						</view>
						<view class="attr">
							<text v-for="(item2,index2) in data.info.attrs"
								:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
						</view>
						<text>￥{{data.info.price}}</text>
					</view>
				</view>
			</view>
			<view class="refundInfo">
				<view class="top">
					退款信息
				</view>
				<view class="listItem">
					退款原因：
					<view class="">
						{{data.info.reason}}
					</view>
				</view>
				<view class="listItem">
					退款金额：
					<view class="">
						¥{{data.info.refundAmount}}
					</view>
				</view>
				<view class="listItem">
					申请时间：
					<view class="">
						{{data.info.createTime}}
					</view>
				</view>
				<view class="listItem">
					退款流水号:
					<view class="">
						{{data.info.refundNo}}
					</view>
				</view>
			</view>
		</view>
		<view class="bot"
			v-if="data.info.refundState.value == 'PENDING' || data.info.refundState.value == 'WAIT_SELLER_RECEIVE' || data.info.refundState.value == 'WAIT_SELLER_REPEAT_SEND'">
			<text @tap="submit(0)" v-if="data.info.refundState.value == 'PENDING'">拒绝申请</text>
			<text
				@tap="submit(1)">{{data.info.refundState.value == 'PENDING'?data.info.refundType.value == 'CHANGE_PRODUCT'?'同意换货':'同意退款':data.info.refundState.value == 'WAIT_SELLER_RECEIVE'?'确认收货':'发货'}}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getRefundDetail, auditRefund, sellerReceive, sellerRepeatSend } from '@/utils/api/goods'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import {
		reactive,
	} from 'vue';
	const data = reactive<any>({
		index: 1,
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({ id }) => {
		data.id = id;
	})
	onShow(() => {
		init()
	})
	const init = () => {
		getRefundDetail({ data: { refundNo: data.id } }).then((res) => {
			data.info = res.data;
			if (res.data.refundState.value == 'SUCCESS') {
				data.index = 2;
			}
		})
	}
	const handeClick = () => {
		if (!data.info.buyerLogisticsInfo) {
			uni.showToast({
				title: '暂无物流',
				icon: 'none'
			})
			return;
		}
		uni.navigateTo({
			url: '/pages/logistics/index?logisticsNo=' + data.info.buyerLogisticsNo + '&refundNo=' + data.info.refundNo
		})
	}
	const submit = (i) => {
		if (i) {
			uni.showModal({
				title: '提示',
				content: data.info.refundState.value == 'PENDING' ? '是否同意？' : data.info.refundState.value == 'WAIT_SELLER_RECEIVE' ? '是否确认收货？' : '是否发货？',
				success: (e) => {
					if (e.confirm) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						let b = null
						let obj = {}
						if (data.info.refundState.value == 'PENDING') {
							obj = { refundNo: data.id, flag: 'Y' };
							b = auditRefund
						} else if (data.info.refundState.value == 'WAIT_SELLER_RECEIVE') {
							b = sellerReceive
							obj = { refundNo: data.id };
						} else {
							if (!data.number) {
								uni.showToast({
									title: '请输入快递单号',
									icon: 'none'
								})
								return;
							}
							b = sellerRepeatSend;
							obj = { refundNo: data.id, logisticsNo: data.number };

						}
						b({ data: obj }).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '提交成功!',
									icon: 'none'
								})
								init()
							}
						})
					}
				}
			})
		} else {
			uni.showModal({
				title: '提示',
				editable: true,
				placeholderText: '请输入理由',
				success: (e) => {
					if (e.confirm) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						auditRefund({ data: { refundNo: data.id, flag: 'N', auditOpinion: e.content } }).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '提交成功!',
									icon: 'none'
								})
								init()
							}
						})
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	.attr {

		text {
			font-size: 24rpx;
			color: #8C8C8C;
			display: inline-block;
			margin-right: 10rpx;
			margin: 0 !important;
		}
	}

	.topTit {
		font-size: 24rpx;
		color: #8C8C8C;
		margin-bottom: 20rpx;
		padding: 24rpx;
		border-radius: 24rpx;
		background: #fff;
		color: #8C8C8C;
		margin-bottom: 20rpx;

		>view {
			margin-bottom: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #EB432F;

			.left {
				display: flex;
				align-items: center;
				font-size: 32rpx;
			}
		}

		image {
			margin-right: 8rpx;
			width: 36rpx;
		}
	}

	.productDetails {
		height: 100vh;
		display: flex;
		background: #F4F6FA;
		flex-direction: column;

		.main {
			flex: 1;
			padding: 24rpx;

			.CANCEL {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				color: #8C8C8C;
				margin-bottom: 20rpx;
			}

			.top_1 {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				color: #8C8C8C;
				font-size: 24rpx;

				view {
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;

					image {
						width: 36rpx;
						margin-right: 12rpx;
					}
				}
			}

			.des_2 {
				margin: 16rpx 0;
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;

				>view {
					height: 90rpx;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					color: #595959;
				}

				.kd {
					display: none;
					border-bottom: 2rpx solid #F4F6FA;

					view {
						margin-left: 48rpx;
						flex: 1;
						display: flex;
						justify-content: space-between;

						image {
							width: 36rpx;
						}
					}
				}

				.dh {
					input {
						flex: 1;
						margin-left: 48rpx;
						height: 100%;
					}

					image {
						width: 30rpx;
					}
				}
			}

			.des_1 {
				margin: 16rpx 0;
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;

				>view {
					padding: 16rpx;
					border-radius: 16rpx;
					background: #F5F5F5;
					margin-top: 24rpx;

					view {
						display: flex;
						margin-bottom: 12rpx;
						align-items: center;

						image {
							width: 48rpx;
							margin-right: 10rpx;
						}

						font-size: 24rpx;
						color: #595959;
					}
				}
			}

			.negotiation {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 36rpx;
				}
			}

			.handle {
				>.top {
					padding: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					font-size: 32rpx;

					.topList {
						display: flex;
						padding: 0 40rpx;

						>view {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								width: 18rpx;
								height: 18rpx;
								border-radius: 50%;
								// border: 2rpx solid #6B64D3;
								background: #EFEFEF;
							}

							view {
								width: 260rpx;
								height: 3rpx;
								background: #EFEFEF;
							}
						}

						.active {
							text {
								background: #6B64D3;
							}

						}

						.active1 {
							view {

								background: #6B64D3;
							}
						}

					}

					.topList_1 {
						display: flex;
						justify-content: space-between;
						margin-top: 16rpx;

						text {
							font-size: 24rpx;
						}
					}
				}

				>.des {
					padding: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					font-size: 32rpx;
					margin: 16rpx 0;
					display: flex;
					flex-direction: column;

					text:nth-of-type(1) {
						font-size: 24rpx;
						color: #8C8C8C;
						line-height: 1.8;
					}

					text:nth-of-type(2) {
						font-size: 24rpx;
						color: #F53F3F;
						line-height: 1.8;
					}
				}
			}

			>.refund {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;

				.goods {
					display: flex;
					margin-top: 24rpx;

					.left {
						width: 150rpx;
						height: 150rpx;
						background: #ccc;
						margin-right: 24rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						flex: 1;
						display: flex;
						flex-direction: column;

						>text:nth-of-type(1) {
							color: #8C8C8C;
						}

						>view:nth-of-type(1) {
							color: #8C8C8C;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin: 10rpx 0;
						}

						>text:nth-of-type(2) {
							color: #EB432F;
							font-size: 32rpx;
						}
					}
				}
			}

			>.refundInfo {
				border-radius: 24rpx;
				background: #fff;
				padding: 24rpx;
				margin-top: 24rpx;

				.top {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right {
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						color: #1188FF;
						border: 2rpx solid #1188FF;
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							margin-right: 10rpx;
						}
					}
				}

				.listItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #8C8C8C;
					margin-top: 20rpx;

					view {
						display: flex;
						align-items: center;
						flex: 1;
						margin-left: 24rpx;
						justify-content: flex-end;
						text-align: right;

						image {
							width: 27rpx;
							margin-left: 21rpx;
						}
					}
				}
			}

		}

		>.bot {
			padding: 18rpx 32rpx 50rpx 0;
			display: flex;
			justify-content: flex-end;
			background: #fff;

			text {
				width: 160rpx;
				line-height: 64rpx;
				text-align: center;
				margin-left: 16rpx;
				border-radius: 64rpx;
			}

			text:nth-of-type(1) {
				border: 2rpx solid #D9D9D9;
			}

			text:nth-of-type(2) {
				color: #fff;
				background: #6B64D3;
			}
		}
	}
</style>